<template>
  <div class="web_container">
    <div class="avatar_wrapper">
      <img :src="defaultSetting.avatarBg" alt="" class="userAvatar" />
    </div>
    <span class="username">
      石添的编程哲学
      <el-tooltip class="box-item" effect="dark" content="博主" placement="right">
        <svg-icon icon-class="bozhu"></svg-icon>
      </el-tooltip>
    </span>
    <div class="pt">
      <a href="https://space.bilibili.com/505142188" target="_blank" title="bilibili" rel="noopener noreferrer nofollow">
        <el-image :src="blblImg" style="width: 30px; height: 30px;" />
      </a>
      <a href="https://blog.csdn.net/qq_36386908?type=blog" target="_blank" title="CSDN"
        rel="noopener noreferrer nofollow">
        <el-image :src="csdnImg" style="width: 30px; height: 30px;" />
      </a>
    </div>


    <p class="summary">
      于混沌中寻找大道，方知下学乃上达之功夫
    </p>
    <div class="site_number">
      <div class="site_number_item">
        <div class="site_number_title">文章数</div>
        <div class="site_number_volume">200</div>
      </div>

      <div class="site_number_item">
        <div class="site_number_title">视频数</div>
        <div class="site_number_volume">200</div>
      </div>

      <div class="site_number_item">
        <div class="site_number_title">评论数</div>
        <div class="site_number_volume">200</div>
      </div>

      <div class="site_number_item">
        <div class="site_number_title">点赞数</div>
        <div class="site_number_volume">200</div>
      </div>
    </div>
  </div>
</template>
<script setup name="site">
import { useSiteStore } from "@/store/moudel/site.js";

const { proxy } = getCurrentInstance();
const defaultSetting = ref(proxy.$setting);
const siteStore = useSiteStore();
const webInfo = ref(siteStore.getWebInfo);
const day = ref("");
const hours = ref("");
const minute = ref("");
const second = ref("");
const blblImg = ref("http://localhost:8128/img/icons/img/bilibili.png");
const csdnImg = ref("http://localhost:8128/img/icons/img/csdn.png");


var timer = setInterval(runTime, 1000);

function runTime() {
  var timeold = new Date().getTime() - new Date(1627747200000).getTime();
  var msPerDay = 24 * 60 * 60 * 1000;
  var daysold = Math.floor(timeold / msPerDay);
  var time = new Date();
  day.value = daysold;
  hours.value = time.getHours();
  minute.value = time.getMinutes();
  second.value = time.getSeconds();
}
</script>
<style lang="scss" scoped>
.web_container {
  width: 370px;
  height: 460px;
  background-image: url("../../assets/image/profile.png");
  position: relative;
  padding: 45px 15px 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;

  .avatar_wrapper {
    position: relative;
    width: 75px;
    height: 75px;
    margin-bottom: 12px;

    .userAvatar {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      display: block;
      overflow: hidden;
      padding: 5px;
      -o-object-fit: cover;
      object-fit: cover;
      transition: transform 0.5s;
      z-index: 20;

      &:hover {
        transform: rotate(360deg);
      }
    }

    .guajian {
      z-index: 10;
      position: absolute;
      top: -20px;
      right: -3px;
    }
  }

  .username {
    color: #365536;
    font-family: 'Ali_M';
    display: block;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 8px;

    svg {
      width: 18px;
      height: 18px;
      vertical-align: -3px;
    }
  }

  .summary {
    margin-top: 20px;
    font-family: 'Ali_R';
    color: #365536;
    font-size: 16px;

  }

  .desc {
    font-size: 14px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    background: radial-gradient(circle at 49.86% 48.37%,
        #0090ff 0,
        #0089ff 3.33%,
        #3a82ff 6.67%,
        #717aff 10%,
        #9371fb 13.33%,
        #ae67ef 16.67%,
        #c45de1 20%,
        #d652d2 23.33%,
        #e448c2 26.67%,
        #ef3eb0 30%,
        #f7369e 33.33%,
        #fd318c 36.67%,
        #ff317a 40%,
        #ff3569 43.33%,
        #fd3d57 46.67%,
        #f94646 50%,
        #f35035 53.33%,
        #ea5a22 56.67%,
        #e16308 60%,
        #d56d00 63.33%,
        #c97500 66.67%,
        #bb7d00 70%,
        #ac8300 73.33%,
        #9d8900 76.67%,
        #8c8f00 80%,
        #7a9300 83.33%,
        #669700 86.67%,
        #4f9b00 90%,
        #309e0e 93.33%,
        #00a029 96.67%,
        #00a23d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .collect {
    margin-top: 8px;
    width: 100%;

    .btn {
      background-color: transparent;
      border-radius: 5px;
      border: 2px solid var(--theme-color);
      color: var(--theme-color);
      padding: 10px 20px;
      font-weight: 700;
      position: relative;
      transition: all 1s;
      z-index: 1;
      overflow: hidden;
      height: 30px;
      width: 100%;
      line-height: 8px;

      &:hover {
        color: white;

        &::before {
          width: 180%;
        }
      }

      &::before {
        content: "";
        height: 100%;
        position: absolute;
        left: -30px;
        top: 0;
        background-color: var(--theme-color);
        transform: skewX(45deg);
        width: 0%;
        transition: all 1s;
        z-index: -1;
      }
    }
  }

  .pt {
    border-top: 1px solid var(--border-line);
    justify-content: space-around;
    text-align: center;
    align-items: center;
    font-size: 14px;
    display: flex;
    margin: 10px;

    a {
      display: inline-block;
      margin: 0 10px;
      transition: all 0.5s;

      &:hover {
        transform: scale(1.2);
      }

      svg {
        width: 18px;
        height: 18px;
      }
    }
  }

  // 网站数据
  .site_number {
    width: 100%;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    font-family: 'Ali_R';
      font-size: 16px;
    .site_number_item {
      padding: 0px 10px;
      text-align: center;
      
      .site_number_title {
        margin-bottom: 6px;
      }
    }
  }
}
</style>